<script setup>
import {ref,onMounted} from "vue";
import {
  addAddressBook,
  delAddressBook,
  editAddressBook,
  putAddressBookDefault,
  queryAddressBookList
} from "@/apis/addressBookApi.js";
import {useAddress} from "@/views/AddressBook/composables/address.js";
const label = ref(["家", "学校","公司", "其他"]);
const addressBookList =ref([])
const getAddressBookList = async () => {
  const res=await queryAddressBookList();
  console.log(res.data)
  addressBookList.value=res.data;
}
onMounted(() => {
  getAddressBookList();
})
const address=ref({ "id": 4, "userId": 2, "consignee": "东东", "phone": "13883155245", "sex": "0", "provinceCode": "50", "provinceName": "重庆市", "cityCode": "5001", "cityName": "市辖区", "districtCode": "500106", "districtName": "沙坪坝区", "detail": "大学城美丽墅", "label": "2", "isDefault": 0 })
//const address=ref({ "consignee": "东东", "phone": "13883155245", "sex": "0", "provinceCode": "50", "provinceName": "重庆市", "cityCode": "5001", "cityName": "市辖区", "districtCode": "500106", "districtName": "沙坪坝区", "detail": "大学城美丽墅", "label": "2", "isDefault": 0 })

const openDialog=()=>{
  showDialog.value=true

}

const showDialog=ref(false)
const confirm=async ()=>{
  console.log(selectedAddress.value)
  address.value.provinceName=selectedAddress.value[0]
  address.value.cityName=selectedAddress.value[1]
  address.value.districtName=selectedAddress.value[2]
/*  address.value.provinceCode=selectedAddress.value[0]
  address.value.cityCode=selectedAddress.value[1]
  address.value.districtCode=selectedAddress.value[2]*/
  console.log("+++++++++++++++>",address.value)
  const res=await addAddressBook(address.value)
  console.log(res)
  showDialog.value=false
  getAddressBookList();
}
const cancel=()=>{
  showDialog.value=false
}
const {selectedAddress,cascaderProps}=useAddress()

const showEditDialog=ref(false)
const open=(item)=>{
  console.log(item)
  address.value=item
  selectedAddress.value[0]=address.value.provinceName
  selectedAddress.value[1]=address.value.cityName
  selectedAddress.value[2]=address.value.districtName
  console.log("selectedAddress==================>",selectedAddress.value)
  showEditDialog.value=true
}
const updateAddressBook=async ()=>{

  address.value.provinceName=selectedAddress.value[0]
  address.value.cityName=selectedAddress.value[1]
  address.value.districtName=selectedAddress.value[2]
  const res=await editAddressBook(address.value)
  console.log(res)
  showEditDialog.value=false
  getAddressBookList();
}
const deleteAddressBook=async ()=>{
  const res=await delAddressBook(address.value.id)
  console.log(res)
  showEditDialog.value=false
  getAddressBookList();
}
</script>

<template>

  <div class="container">
    <div class="row">
      <div class="newAddress" @click="openDialog">+ 新增收货地址 </div>
      <div class="address" v-for="item in addressBookList"  v-bind:key="item.id">

        <!--        { "id": 4, "userId": 2, "consignee": "东东", "phone": "13883155245", "sex": "0", "provinceCode": "50", "provinceName": "重庆市", "cityCode": "5001", "cityName": "市辖区", "districtCode": "500106", "districtName": "沙坪坝区", "detail": "大学城美丽墅", "label": "2", "isDefault": 0 }
             -->
        <div>
          <ul>
            <li ><span>收货人：{{item.consignee}}</span></li>
            <li ><span>联系电话：{{item.phone}}</span></li>
            <li ><span>收货地址：{{item.provinceName+item.cityName+item.districtName+item.detail}}</span></li>
            <li ><span>标签：{{label[item.label]}}</span></li>
            <li ><el-radio v-model="item.isDefault">  </el-radio><span>是否为默认地址:</span></li>
          </ul>
        </div>
       <div>
         <el-button @click="open(item)">编辑</el-button>
       </div>
      </div>

    </div>
    <!--添加地址-->

    <el-dialog v-model="showDialog" title="新增地址" center width="6rem">
      <div class="addressWrapper">
        <ul>
            <!--        { "id": 4, "userId": 2, "consignee": "东东", "phone": "13883155245", "sex": "0", "provinceCode": "50", "provinceName": "重庆市", "cityCode": "5001", "cityName": "市辖区", "districtCode": "500106", "districtName": "沙坪坝区", "detail": "大学城美丽墅", "label": "2", "isDefault": 0 }
                 -->
            <li> <span>联系人：</span> <el-input ltype="text" v-model="address.consignee"></el-input></li>
            <li> <span>联系电话：</span><el-input type="number" v-model="address.phone"></el-input></li>
            <li> <span>收货地址：</span>
              <el-cascader
                  v-model="selectedAddress"
                  :props="cascaderProps"
                  placeholder="请选择地址"
                  clearable
                  style="width: 4rem"
              />
              <el-input type="textarea" v-model="address.detail"></el-input></li>

            <li>
              <span>标签:</span>
              <el-radio-group v-model="address.label">
                <el-radio-button label="0" >家</el-radio-button>
                <el-radio-button label="1">学习</el-radio-button>
                <el-radio-button label="2">公司</el-radio-button>
                <el-radio-button label="3">其他</el-radio-button>
              </el-radio-group>
            </li>


        </ul>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">保存</el-button>
      </span>
      </template>
    </el-dialog>
    <!--修改地址-->

    <el-dialog v-model="showEditDialog" title="修改地址" center width="6rem">
      <div class="addressWrapper">
        <ul>
          <!--        { "id": 4, "userId": 2, "consignee": "东东", "phone": "13883155245", "sex": "0", "provinceCode": "50", "provinceName": "重庆市", "cityCode": "5001", "cityName": "市辖区", "districtCode": "500106", "districtName": "沙坪坝区", "detail": "大学城美丽墅", "label": "2", "isDefault": 0 }
               -->
          <li> <span>联系人：</span> <el-input ltype="text" v-model="address.consignee"></el-input></li>
          <li> <span>联系电话：</span><el-input type="number" v-model="address.phone"></el-input></li>
          <li> <span>收货地址：</span>
            <el-cascader
                v-model="selectedAddress"
                :props="cascaderProps"
                placeholder="请选择地址"
                clearable
                style="width: 4rem"
            />
            <el-input type="textarea" v-model="address.detail"></el-input></li>

          <li>
            <span>标签:</span>
            <el-radio-group v-model="address.label">
              <el-radio-button label="0" >家</el-radio-button>
              <el-radio-button label="1">学习</el-radio-button>
              <el-radio-button label="2">公司</el-radio-button>
              <el-radio-button label="3">其他</el-radio-button>
            </el-radio-group>
          </li>


        </ul>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteAddressBook">删除</el-button>
        <el-button type="primary" @click="updateAddressBook">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 15px;
}
ul{
  list-style: none;
}
.address li{
  height: 0.5rem;
  font-size: 0.3rem;
}
.address{
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;

}
.newAddress{
  background: $xtxColor;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 15px;
}
.row{
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}


</style>